<template>
          <div  >
      <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>数据分析</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="box">
        <div id="main"></div>
      </div>
            <div id="mainn"></div>
            <div id="mainnn"></div>
          </div>
</template>

<script>
import * as echarts from 'echarts';
import _ from 'lodash'
export default {
  data() {
    return {
      userlist:[],
      manyi:0,
      buamnyi:0
    }
  },
      created() {
        this.getUserList()
        this.addd()
    },
   mounted() {
     //柱状
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title:{
    text:"就业率/百分比"
  },
  xAxis: {
    type: 'category',
    data: ['软件工程',"计算机与科学","大数据","人工智能"]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [10, 8,{
          value: 15,
          itemStyle: {
            color: '#a90000'
          }
        }, 9],
      type: 'bar'
    }
  ]
};

//饼图
var chartDomm = document.getElementById('mainn');
var myChartt = echarts.init(chartDomm);
var optionn;

optionn = {
  title: {
    text: '就业满意度',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: this.manyi, name: '满意' },
        { value: this.buamnyi, name: '不满意' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

//折线图
var chartDomnn = document.getElementById('mainnn');
var myCharttt = echarts.init(chartDomnn);
var optionnn;

optionnn = {
  title: {
    text: '质量/薪资'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['软件工程', '计算机与科学', '大数据', '人工智能']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2017', '2018', '2019', '2020', '2021']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '软件工程',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [4806,5000,5360,6000,5500]
    },
    {
      name: '计算机与科学',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [4980, 5481, 5213, 7000, 5806]
    },
    {
      name: '大数据',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [4506,5324,4931,5971,6817]
    },
    {
      name: '人工智能',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [5231,6571,5347,6841,5672]
    },
  ]
};


    option && myChart.setOption(option);
    optionn && myChartt.setOption(optionn);
    optionnn && myCharttt.setOption(optionnn);
  },
  methods: {
             getUserList(){
          this.$http.get('/getlist').then(res=>{
             this.userlist = res.data
            console.log(res);
          })
        },

      addd(){
        var userlist = JSON.parse(localStorage.getItem('userlist'))
      for(let i in userlist){
          console.log(231);
        if(userlist[i].manyi == '满意'){
          this.manyi++
        }else if(userlist[i].manyi == '不满意'){
          this.buamnyi++
        }
      }
      console.log(this.manyi);
       console.log(this.buamnyi);
     }
  },
}
</script>

<style>
#main{
  width: 500px; height: 450px;
    border: 1px solid red;
  background-color: white;
}
#mainn{
  width: 500px; height: 450px;
  border: 1px solid red;
  background-color: white;
    float: left;
    margin-left: 50px;
      margin-top: 20px;
}
.box{
  margin-left: 50px;
  margin-top: 20px;
  float: left;
}
#mainnn{
  width: 500px; height: 450px;
    border: 1px solid red;
  background-color: white;
      float: left;
          margin-left: 50px;
      margin-top: 20px;
}
</style>